<template>
	<view>
		<custom-header title="平台公告" />
		<view class="_wrap">
			<view class="tabs_wrap">
				<view 
					class="list" 
					:class="tab == item.value?'active':''" 
					v-for="(item,index) in tabsList" 
					:key="index"
					@click="handleTab(item)">
					{{ item.name }}
				</view>
			</view>
			
			<scroll-view
				:scroll-y="true" 
				scroll-with-animation
				:style="{height:'calc(100vh - 82rpx - 5rpx - '+statusBarHeight+'px)'}"
				class="scroll_content_wrap">
				<view
					class="no_data"
					v-if="!listData.length && listLoading != 'loading'">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nodata.png" mode=""></image>
						</view>
				</view>
					<view class="list_wrap"v-if="listData.length">
						<view 
							class="list" 
							v-for="(item,index) in listData" 
							:key="index"
							@click="handleDetail(item)">
							<view class="img">
								<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop3.png" mode=""></image>
								<view class="title" v-if="item.title">
									<view class="text">{{ item.title }}</view>
								</view>
							</view>
							<view class="name_btn">
								<view class="name">{{ item.name }}</view>
								<view class="btn">立即查看</view>
							</view>
						</view>
					</view>
					<view class="loading_wrap" v-if="listLoading == 'loading'">
						<up-loadmore
							:status="listLoading"
							iconSize="22"
							iconColor="#FF3316"
							loadingIcon='semicircle'
							loadingText=""
							/>
					</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref , onMounted} from 'vue';
	import { useStore } from 'vuex';
	import noticeApi from '@/api/notice'

	const store = useStore()
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	const tab = ref(1)
	const tabsList = ref([
		{ value:'supply_public_notice',name:'平台公告' },
		{ value:'supply_quality_rectify',name:'质量整改通知' },
	])

	const params = {
		articleLocation: 'supply_public_notice',  
		pageNo: 1,                   
		pageSize: 20                 
	}

	// 选择tabs
	const handleTab = (e)=>{
		console.log(e)
		tab.value = e.value
		params.articleLocation = e.value
		loadGetListData()
	}


	// 获取列表数据
	const listLoading = ref('loadmore');
	const listData = ref([]);

	// 获取公告分页列表
	const loadGetListData = async () => {
		try {
			listData.value = []
			listLoading.value = 'loading'

			const response = await noticeApi.getNoticePageList(params)

			if (response && response.records) {
				listData.value = response.records
			} else {
				listData.value = []
			}
			listLoading.value = 'nomore'

		} catch (error) {
			listLoading.value = 'nomore'
			console.error('获取公告列表失败:', error)
		}
	};
	// 查看详情
	const handleDetail = (item)=>{
		uni.navigateTo({
			url:'/pages/platformNoticeDetail/platformNoticeDetail?id='+item.id
		})
	}
	
	
	onMounted(()=>{
		loadGetListData()
	})
</script>

<style lang="scss">
	._wrap{
		padding: 0 30rpx;
	}
	.tabs_wrap{
		display: flex;
		height: 82rpx;
		.list{
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			color: #999;
			font-size: 32rpx;
			position: relative;
			&.active{
				color: #333333;
				font-weight: bold;
				&::after{
					content: '';
					width: 28rpx;
					height: 8rpx;
					background: #FF3316;
					border-radius: 8rpx;
					position: absolute;
					bottom: 8rpx;
					left: 50%;
					margin-left: -14rpx;
				}
			}
		}
	}
	.no_data{
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx;
		height: calc(100% - 40rpx);
		.icon{
			width: 280rpx;
			height: 322rpx;
		}
	}
	.list_wrap{
		padding-bottom: 30rpx;
		.list{
			border-radius: 20rpx;
			background: #FFFFFF;
			overflow: hidden;
			margin-top: 30rpx;
			.img{
				height: 280rpx;
				position: relative;
				image{
					width: 100%;
					height: 100%;
				}
				.title{
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: rgba(0,0,0,0.4);
					display: flex;
					align-items: center;
					justify-content: center;
					.text{
						width: 320rpx;
						font-size: 40rpx;
						color: #fff;
						font-weight: bold;
						text-align: center;
					}
				}
			}
			.name_btn{
				display: flex;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				font-size: 28rpx;
				.name{
					color: #333;
					font-weight: bold;
				}
				.btn{
					color: #999999;
				}
			}
		}
	}
</style>
